<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<script src="js/echarts.min.js"></script>
		<script src="js/mydata.js"></script>
	</head>
	<style>
		body {
			background-color: #06164A;
		}

		#app {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}

		#chart1,
		#chart2,
		#chart3,
		#chart4 {
			width: 33%;
			height: 300px;
			border: 1px solid rgba(255, 255, 255, .3);
			margin: 10px 0;
		}

		#chart4 {
			width: 100%;
		}
	</style>
	<body>
		<div id='app'>
			<div id="chart1"></div>
			<div id="chart2"></div>
			<div id="chart3"></div>
			<div id="chart4"></div>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {}
				},
				mounted() {
					this.chart1()
					this.chart2()
					this.chart3()
					this.chart4()
				},
				methods: {
					chart1() {
						var x = [],
							y1 = [],
							y2 = []
						data.chart1.forEach(item => {
							x.push(item.industry)
							y1.push(item.value1)
							y2.push(item.value2)
						})
						var chartDom = document.getElementById('chart1');
						var myChart = echarts.init(chartDom, 'dark');
						var option;
						option = {
							backgroundColor: '#06164A',
							title: {
								text: '各行各业程序员的数量',
								left: 'center',
								top: 10
							},
							legend: {
								show: true,
								top: 35
							},
							tooltip: {
								show: true,
								trigger: 'axis'
							},
							grid: { //图标的四周的内边距
								bottom: 30,
								right: 10,
								top: 70
							},
							xAxis: {
								type: 'category',
								data: x,
								splitLine: {
									show: true,
									lineStyle: {
										type: 'dashed'
									}
								}
							},
							yAxis: {
								type: 'value'
							},
							series: [{
									name: '2023',
									data: y1,
									type: 'bar',
									itemStyle: {
										borderRadius: 8
									}
								},
								{
									name: '2024',
									data: y2,
									type: 'bar',
									itemStyle: {
										borderRadius: 8
									}
								}
							]
						};
						option && myChart.setOption(option);
						window.addEventListener('resize', () => {
							myChart.resize()
						})
					},
					chart2() {
						var x = [],
							y1 = [],
							y2 = []
						data.chart2.forEach(item => {
							x.push(item.month)
							y1.push(item.value1)
							y2.push(item.value2)
						})
						var chartDom = document.getElementById('chart2');
						var myChart = echarts.init(chartDom, 'dark');
						var option;
						option = {
							backgroundColor: '#06164A',
							title: {
								text: '学习变化',
								left: 'center',
								top: 10
							},
							legend: {
								show: true,
								top: 35
							},
							tooltip: {
								show: true,
								trigger: 'axis'
							},
							grid: { //图标的四周的内边距
								bottom: 30,
								right: 10,
								top: 70
							},
							xAxis: {
								type: 'category',
								data: x,
								splitLine: {
									show: true,
									lineStyle: {
										type: 'dashed'
									}
								}
							},
							yAxis: {
								type: 'value'
							},
							series: [{
									name: '新增项目',
									data: y1,
									type: 'line',
									smooth: true,
									itemStyle: {
										color: '#ED3F35',
									},
									lineStyle: {
										width: 3
									},
									symbol: 'emptyCircle',
									symbolSize: 7
								},
								{
									name: '新增技能',
									data: y2,
									type: 'line',
									smooth: true,
									itemStyle: {
										color: '#00F9F9',
									},
									lineStyle: {
										width: 3
									},
									symbol: 'emptyCircle',
									symbolSize: 7
								}
							]
						};
						option && myChart.setOption(option);
						window.addEventListener('resize', () => {
							myChart.resize()
						})
					},
					chart3() {
						data.chart3.forEach(item => {
							item.name = item.ageGroup
						})
						var chartDom = document.getElementById('chart3');
						var myChart = echarts.init(chartDom, 'dark');
						var option;
						option = {
							backgroundColor: '#06164A',
							title: {
								text: '年龄分布',
								left: 'center',
								top: 10
							},
							tooltip: {
								show: true,
								trigger: 'item',
								formatter: '{b}:{c}({d}%)'
							},
							grid: { //图标的四周的内边距
								bottom: 30,
								right: 10,
								top: 70
							},
							series: [{
								name: '年龄分布',
								data: data.chart3,
								type: 'pie',
								roseType: 'area',
								radius: ['20%', '80%'],
								itemStyle: {
									borderRadius: 5
								}
							}]
						};
						option && myChart.setOption(option);
						window.addEventListener('resize', () => {
							myChart.resize()
						})
					},
					chart4() {
						var x = [],
							y1 = [],
							y2 = []
						data.chart4.forEach(item => {
							x.push(item.date)
							y1.push(item.inflow)
							y2.push(item.outflow)
						})
						var chartDom = document.getElementById('chart4');
						var myChart = echarts.init(chartDom, 'dark');
						var option;
						option = {
							backgroundColor: '#06164A',
							title: {
								text: '人员流动',
								left: 'center',
								top: 10
							},
							legend: {
								show: true,
								top: 35
							},
							tooltip: {
								show: true,
								trigger: 'axis'
							},
							grid: { //图标的四周的内边距
								bottom: 30,
								right: 50,
								top: 70,
								left: 50
							},
							xAxis: {
								type: 'category',
								data: x,
							},
							yAxis: {
								type: 'value',
								axisLine: {
									show: true,
								},
								splitLine: {
									show: false,
								}
							},
							series: [{
									name: '流入',
									data: y1,
									type: 'line',
									smooth: true,
									areaStyle: {
										color: 'rgba(124,255,178,.2)',
									}
								},
								{
									name: '流出',
									data: y2,
									type: 'line',
									smooth: true,
									symbol: 'none',
									areaStyle: {
										color: 'rgba(73,146,255,.2)',
									}
								}
							]
						};
						option && myChart.setOption(option);
						window.addEventListener('resize', () => {
							myChart.resize()
						})
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>